13 QR-Code Usability Guidelines 13 個二維碼可用性

QR 碼的用途

漸進式披露:提供超出有限空間的資訊,比如透過標誌上的二維碼引導使用者線上獲取更多細節。

跨渠道過渡:支援物理到數字空間的轉換,例如透過停車計時器的二維碼下載支付應用,或在裝置間無縫切換。

減少印刷需求:將紙質資訊轉移到數字空間,例如餐廳選單的線上二維碼,減少細菌傳播和印刷需求。

QR 碼可用性指南

1. 告訴使用者二維碼的作用及來源

QR 碼本身沒有資訊線索,設計者需提供明確的上下文資訊,例如標籤或短網址。

示例:標註 QR 碼的用途,如捐款連結或相關網站地址。

❌ 這個 Yeti 馬克杯底部的二維碼未表明它指向何處,這既令人懷疑又沒有吸引力。
❌ 使用者必須閱讀這本《國家地理》雜誌背面的整段文字,以瞭解最後一句中提到的二維碼的用途
✅ 這個路牌明確表明,掃描該二維碼可到達一個地方,在那裡使用者可以向聯合住房連線組織進行本地捐贈。
✅ 所有型別的可掃描程式碼都需要上下文資訊。

2. 明確可掃描的裝置和應用(如有必要)

如果需要特定應用或裝置掃描,必須在二維碼旁清楚標明。

示例:在桌面顯示的密碼二維碼中,標註需要用建立密碼的裝置進行掃描。

✅ 此密碼金鑰二維碼周圍的此上下文資訊清楚表明,必須由使用者建立該密碼金鑰的裝置進行掃描。

3. QR 碼應連結到移動友好的頁面

假定使用者會用移動裝置訪問相關頁面,因此頁面應具有響應式設計或專為移動端最佳化。

錯誤示例:連結到在手機上顯示不佳的網站。

❌ 棒約翰(Papa Johns)工作申請的二維碼連結到一個在手機上顯示效果不佳的網站。

4. 深度連結到相關頁面或操作

確保二維碼直接連結到上下文相關的頁面,而非通用主頁。

示例:下載應用程式的二維碼應直接指向 App Store 或 Google Play。

❌ 這雙耐克鞋(左)鞋舌上的二維碼指向的是該網站的通用主頁(右),而不是與這些特定鞋子相關的頁面。
✅ 傳單(頂部)上用於下載肯德基應用程式的二維碼可根據掃描裝置的作業系統,直接將使用者導向蘋果應用商店(左下角)或谷歌應用商店(右下角)中的肯德基應用程式。
❌ 這個漢堡王傳單(頂部)上的二維碼可讓使用者在應用程式中獲得優惠,但前提是他們已經下載了該應用程式(左下角)。如果他們沒有下載,就會將他們帶到該公司網站上一個不相關的頁面(右下角)。

5. 在同一裝置顯示和訪問資訊時,避免使用二維碼

如果資訊需要在同一裝置上檢視,直接連結比二維碼更方便。

錯誤示例:使用者需掃描自己裝置上的二維碼來獲取資訊。

✅ 在機場,航班登機牌程式碼(左)被出示給掃描機器,而 Venmo 賬戶程式碼(右)則被出示給其他使用者進行掃描。
❌ 來自宜家(IKEA)的包含此二維碼(左)的電子郵件建議將其新增到移動裝置的數字錢包中。然而,新增到數字錢包中的可掃描程式碼不是二維碼(右),這意味著電子郵件中的二維碼是供使用者掃描的。
微信使用者可以長按應用程式內呈現的二維碼以訪問相關網站。

6. 不要顛倒二維碼的顏色

確保二維碼前景為深色,背景為淺色,以提高掃描成功率。

7. 使用二維碼在裝置間進行身份驗證

透過二維碼支援裝置協同,例如移動裝置掃描電視或電腦上的二維碼進行登入。

示例:WhatsApp 或智慧電視應用使用二維碼快速登入。

✅ WhatsApp 使用者可以透過使用已登入其賬戶的移動裝置掃描二維碼,在計算機上登入。
✅ 許多智慧電視應用程式允許使用者掃描二維碼,以便要麼因為他們已經在移動裝置上登入而自動進行身份驗證,要麼直接前往一個網站,在該網站上他們可以使用更方便的鍵盤手動進行身份驗證。

8. 透過漸進式披露提供額外詳情

在空間有限的情況下,二維碼可以提供更多細節,但需避免使用過於泛化的標籤,例如“瞭解更多”。

✅ 許多產品包裝標籤使用二維碼來提供比標籤上所能容納的更多的產品詳細資訊。大多數使用者不會對這些細節感興趣,但那些感興趣的使用者可以輕鬆獲取它們。

9. 確保二維碼連結資訊的及時性

即使資訊過期,舊二維碼也應重定向到解釋頁面並提供最新資訊。

❌ 2019 年傳單上的二維碼(左)在 2023 年掃描時仍連結到 2019 年活動的同一頁面(右)。
✅ 傳單上 2023 年的二維碼(左)在 2023 年活動結束後掃描時,會連結到 2024 年同一活動的更新頁面(右)。

10. 如果使用者掃描時間少於 15 秒,使用短網址代替二維碼

掃描二維碼需要時間,如在短時間曝光場景(如路邊廣告牌)中,短網址表現更優。

11. 不僅依賴 QR 碼用於頻繁訪問

QR 碼無法被記住,僅使用 QR 碼可能導致使用者無法再次訪問相關內容。

12. 將 QR 碼放在使用者可能注意到的地方

根據“接近原則”,二維碼應與相關內容靠近放置,避免被忽視。

✅ 沃爾瑪的自助結賬機在大螢幕和鍵盤上都提供了用於數字支付的二維碼——當使用者準備付款時,他們很可能會檢視這些位置(不過遺憾的是,鍵盤上的二維碼未做標註)。

13. 確保二維碼足夠大

根據使用者的掃描距離調整二維碼的尺寸,推薦最小尺寸為 2cm x 2cm。

二維碼的潛在風險及安全建議

風險:釣魚、惡意軟體、非法支付、跟蹤、偽造二維碼等。